<template>
	<view>
		<my-loading :vshow="loadingshow"></my-loading>
		<view class="wrap">
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map 
						style="width: 100%; height: 250px;" 
						:latitude="latitude"
						:longitude="longitude"
						:markers="covers"
						@markertap="markertap"
					>
					</map>
				</view>
			</view>
		</view>
		
		<view class="notice">
			<u-notice-bar 
				type="primary" 
				mode="horizontal" 
				:is-circular="true" 
				:list="list"
				bg-color="#097ad9"
				color="#fff"
			></u-notice-bar>
		</view>
		
		<view class="subsection">
			<u-sticky bgColor="#fff">
				<view class="">
					<u-subsection
						:list="subsectionList" 
						:current="current" 
						mode="button" 
						active-color="#fff"
						bgColor="#fff"
						buttonColor="#2b85e4"
						@change="sectionChange"
						>
					</u-subsection>
				</view>
			</u-sticky>
		</view>
		
		<view class="serverList" v-for="item in server" :key="item.id">
			<view class="serverList-title">
				{{item.title}}
			</view>
			<view class="serverList-content">
				<!-- <image :src="item.image"></image> -->
				<!-- <u-lazy-load :image="item.image" img-mode="scaleToFill" height="250"></u-lazy-load> -->
			</view>
			<view class="serverList-detail">
				{{item.content}}
			</view>
			<view class="serverList-bottom">
				<view class="bottom-left">
					<view class="inner_container">
						<view class="left-bag">
							￥
						</view>
						<view class="left-free">
							{{item.free}}
						</view>
					</view>
				</view>
				<view class="bottom-right">
					<u-button type="primary" :custom-style="customStyle" @click="placeOrder(item.id)">去下单</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stoid: 1,
				openid: '',
				loadingshow: true,
				list: [
					'劲爆消息:  汽车美容线上可预约啦',
				],
				subsectionList: [
					{
						name: '上门洗车'
					}, 
					{
						name: '打蜡养护'
					},
					{
						name: '其它服务'
					}
				],
				server: [],
				customStyle: {
					width: '165rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					height: '65rpx'
				},
				current: 0,
				typeid: 1,
				title: 'map',
				latitude: 22.213857,//纬度
				longitude: 113.525176,//经度
				covers: [{
					id: 1,
					title: '香洲店',
					width: 40,
					height: 40,
					latitude: 22.213857,
					longitude: 113.525176,
					iconPath: '../../static/map.png'
				},{
					id: 2,
					title: '拱北店',
					width: 40,
					height: 40,
					latitude: 22.213970,
					longitude: 113.525990,
					iconPath: '../../static/map.png'
				}]
			}
		},
		onLoad(option) {
			this.stoid = option.id
			this.getServerList()
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},
		onReady() {
			//wx请求获取位置权限
			// this.getAuthorize().then(() => {
			// 	//   同意后获取
			// 	this.getLocationInfo();
			// }).catch(() => {
			// 	//   不同意给出弹框，再次确认
			// 	this.openConfirm().then(() => {
			// 			this.getLocationInfo();
			// 		}).catch(() => {
			// 			this.rejectGetLocation();
			// 		}
			// 	);
			// });
		},
		methods: {
			//地图点击事件
			markertap(e) {
				if(e.detail.markerId == 1){
					uni.openLocation({
						latitude: parseFloat(this.covers[0].latitude),
						longitude: parseFloat(this.covers[0].longitude),
						scale: 18
					})
				}else if(e.detail.markerId == 2) {
					
				}
			},
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
							}
						}
						
						uni.setStorageSync("longitude",long);
						uni.setStorageSync("latitude",lat);
						
						that.covers = [{
							id: "3",
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "../../static/map.png",
							width: 40, //宽
							height: 40, //高
						}];
						that.getList();
					},
				});
			},
			getList() {
				console.log("获取周围门店");
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息，为您推荐附近的门店",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			sectionChange(index) {
				if(index == 0) {
					this.typeid = 1,
					this.getServerList()
				}else {
					this.typeid = 2,
					this.getServerList()
				}
			},
			getServerList() { //获取洗车服务列表
				uni.request({
					url: uni.getStorageSync('URL') + 'home/product/Product/carwash',
					method: 'POST',
					data: {
						typeid: this.typeid
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.server = res.data.data
						this.loadingshow = false
					},
					fail: (res)=> {
						
					}
				});
			},
			placeOrder(id) { //去下单
				if(this.openid == '' || this.openid == undefined){
					setTimeout(() => {
						uni.$u.toast('请先登录')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/user'
							})
						}, 1500)
					}, 0);
				}else{
					uni.navigateTo({
						url: '/pagesC/placeOrder/placeOrder?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.wrap {
	
}
.notice {
	width: 100%;
	margin-top: 15rpx;
}
.serverList {
	width: 100%;
	margin: 0 auto;
	padding: 25rpx;
	background-color: #fff;
	.serverList-title {
		font-size: 35rpx;
		color: black;
		font-weight: bold;
	}
	.serverList-content {
		height: 250rpx;
		width: 700rpx;
		margin-top: 25rpx;
		border-radius: 20rpx;
		image{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.serverList-detail {
		font-size: 30rpx;
		color: #2f2f2f;
		margin-top: 20rpx;
	}
	.serverList-bottom {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.bottom-left {
			width: auto;
			height: 65rpx;
			display: flex;
			color: #097ad9;
			.inner_container {
				align-self: flex-end;
				.left-bag {
					font-size: 28rpx;
					display: inline-block;
					margin-right: 5px;
				}
				.left-free {
					font-size: 35rpx;
					display: inline-block;
					margin-right: 5px;
				}
			}
		}
		.bottom-right {
			
		}
	}
}
</style>
